<template>
    <view class="content">
        <view class="title text-lg">养护计划</view>
        <view class="box">
            <view class="item">
                <view>计划名称</view>
                <view class="item-r">{{data.name}}</view>
            </view>
            <view class="item">
                <view>养护类型</view>
                <view class="item-r">{{data.type_txt}}</view>
            </view>
            <view class="item">
                <view>计划时间</view>
                <view class="item-r" v-if="data.plan_time">{{ data.plan_time.split(' ')[0] }}</view>
            </view>
        </view>
        
        <view class="title text-lg">养护物品</view>
        <view class="wrapper">
            <view class="drug text-df text-gray" v-for="(item, index) in data.nurture_record" :key="index">
                <view>物品名称：{{item.goods_name}}</view>
                <view class="u-p-t-15">批次号：{{item.batch}}</view>
                <view class="u-p-t-15">规格：{{item.goods_spec}}</view>
                <view class="u-p-t-15">有效日期：{{item.period_date}}</view>
                <view class="u-p-t-15">生产厂家：{{item.factory}}</view>
                <view class="u-p-t-15">库存量：{{item.stock_nums}}</view>
                <view class="u-p-t-15">库位：{{item.stores_house}}</view>
                <view class="u-p-t-15">货位：{{item.library}}</view>
                <view class="u-p-t-15">托盘：{{item.tray}}</view>
                <!-- 未养护 -->
                <view class="u-p-t-20" v-if="!fromRecord && item.status == 0">
                    <view>养护检查内容：</view>
                    <textarea v-model="item.content" placeholder="请选择养护检查内容" class="t-inp2" disabled @click="open(item, 1)"></textarea>
					<!-- <textarea v-model="item.content" maxlength="200" :auto-height="true" placeholder="请输入养护检查内容" class="t-inp2"></textarea> -->
                    
                    <view class="u-p-t-20">质量结论：</view>
                    <textarea v-model="item.remark" placeholder="请选择质量结论" class="t-inp2" disabled @click="open(item, 2)"></textarea>
                    
                    <view class="u-flex u-row-right u-p-t-20">
                        <view class="drug-btn" @click="doSave(item)">提交</view>
                    </view>
                </view>
                <view v-if="!fromRecord && item.status == 1">
                    <view class="u-p-t-15">养护检查内容：{{item.content}}</view>
                    <view class="u-p-t-15">质量结论：{{item.conclusion}}</view>
                </view>
            </view>
        </view>
		
		<!-- 养护检查内容 -->
		<template v-if="show_1">
			<u-select v-model="show_1" mode="single-column" :list="list" value-name="id" label-name="name" @confirm="confirm($event,1)"></u-select>
		</template>
		<!-- 质量结论 -->
		<template v-if="show_2">
			<u-select v-model="show_2" mode="single-column" :list="level" value-name="id" label-name="name" @confirm="confirm($event,2)"></u-select>
		</template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name: '',
                conserve: '',
                planTime: '',
                id: '',
                data: {},
                content: '',
                remark: '',
                fromRecord: '',//1从养护记录进入
				show_1: false,
				show_2: false,
                list: [],//养护检查内容
				level: [{id: 1,name: '合格'},{id: 2,name: '不合格'}],
				item: {},
            };
        },
        onLoad(option) {
            this.id = option.id
            if (!option.fromRecord) {
                uni.setNavigationBarTitle({
                	title:'养护计划'
                })
            }
            if (option.fromRecord) {
                uni.setNavigationBarTitle({
                	title:'养护记录'
                })
                this.fromRecord = option.fromRecord
            }
            this.getSelect()
        },
        onShow() {
            this.getData()
        },
        methods: {
			open(item, num) {
				this.item = item
				if (num == 1) {this.show_1 = true}
				if (num == 2) {this.show_2 = true}
			},
			
			// 选择
			confirm(e, num) {
			    console.log(e);
				if (num == 1) {
					// 养护检查内容
					this.item.content = e[0].label
				} else if (num == 2) {
					// 质量结论
					this.item.remark = e[0].label
				}
			},
			
            doSave(item) {
                if (!item.content) {
                    this.$toast('请选择养护检查内容')
                    return
                }
                if (!item.remark) {
                    this.$toast('请选择质量结论')
                    return
                }
                this.$ajax('inventorys/nurture_plan', {
                    userToken: this.$getSync('userToken'),
                    plan_id: this.id,//养护计划编号
                    record_id: item.id,//养护商品编号
                    content: item.content,//养护内容
                    conclusion: item.remark,//养护结论
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.getData()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            getData() {
            	this.$ajax('inventorys/nurture_plan_detail', {
                    userToken: this.$getSync('userToken'),
                    plan_id: this.id,
                }).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
                        if (this.data && this.data.nurture_record && this.data.nurture_record.length > 0) {
                            this.data.nurture_record.forEach(cur => {
                                if (cur.status == 0) {
                                    this.$set(cur, 'content', '')
                                    this.$set(cur, 'remark', '')
                                }
                            })
                        }
                        
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
			
			// 获取养护检查内容
			getSelect() {
				this.$ajax('index/get_checks', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
            
        }
    };
</script>

<style lang="scss">
    .t-inp2{
        width: 100%;
        min-height: 70rpx;
        height: auto;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        padding: 15rpx;
        margin-top: 10rpx;
        color: #000;
    }
    .drug-btn{
        color: #fff;
        padding: 10rpx 40rpx;
        background-color: #8392a5;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    
    page{
        background-color: #f5f5f5 !important;
    }
    .title{
        font-weight: bold;
        padding: 45rpx 50rpx 25rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 8rpx;
        height: 26rpx;
        background-color: #ff4800;
        position: absolute;
        left: 25rpx;
        bottom: 32rpx;
    }
    
    
    .box{
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin: 0 30rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        text-align: right;
        padding-left: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .item-img{
        padding: 30rpx 0;
    }
    .img{
        width: 316rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }
    
    
    .drug{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 35rpx 30rpx;
        margin-bottom: 25rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .drug:last-child{
        margin-bottom: 0;
    }
    .drug-state1{
        font-size: 24rpx;
        color: #0075ff;
        padding: 9rpx 12rpx;
        background-color: #ebf4fe;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    
    
    .examine{
        word-break: break-all;
        white-space: pre-line;
        padding: 15rpx 25rpx 30rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin: 0 30rpx 25rpx;
    }
    .t-inp{
        width: 100%;
        min-height: 150rpx;
        height: auto;
        padding-top: 15rpx;
    }
    .examine2{
        padding: 15rpx 0;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 187rpx;
        height: 187rpx;
        margin-right: 15rpx;
        margin-top: 15rpx;
    }
    
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30rpx;
    }
    .refuse-btn{
        font-size: 34rpx;
        color: #757575;
        padding: 25rpx 130rpx;
        background-color: #fff;
        border: 2rpx solid #d8d8d8;
        border-radius: 10rpx;
    }
    .take-btn{
        font-size: 34rpx;
        color: #fff;
        padding: 25rpx 130rpx;
        background-color: #ff4800;
        border-radius: 10rpx;
        margin-left: 20rpx;
    }
    
    .enter-btn{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 10rpx;
    }
    .enter-btn>view{
        padding: 15rpx 50rpx;
        background-color: #8392a5;
        border-radius: 10rpx;
        color: #fff;
    }
    
    .place{
        word-break: break-all;
        white-space: pre-line;
        padding: 5rpx 20rpx 20rpx;
        background-color: #f5f6f8;
        border-radius: 10rpx;
        margin-top: 30rpx;
    }
    .wrapper{
        padding: 0 30rpx;
    }
    .choose-01{
        width: 33rpx;
        height: 33rpx;
        margin-right: 15rpx;
    }
    .time-02{
        width: 33rpx;
        height: 34rpx;
        margin-left: 15rpx;
    }

</style>
